<template>
  <div class="navMenu">
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->
      <el-menu-item
        v-if="!navMenu.children"
        :key="navMenu.id"
        :index="navMenu.path"
      >
        <i v-if="navMenu.icon" :class="navMenu.icon" />
        <span slot="title">{{ navMenu.name }}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu
        v-if="navMenu.children"
        :key="navMenu.id"
        :data="navMenu"
        :index="navMenu.name"
        :show-timeout="9999999"
        :hide-timeout="9999999"
      >
        <template slot="title">
          <i v-if="navMenu.icon" :class="navMenu.icon" />
          <span> {{ navMenu.name }}</span>
        </template>
        <!-- 递归 -->
        <nav-menu :nav-menus="navMenu.children" />
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'NavMenu',
  props: {
    navMenus: {
      type: Array,
      default: null
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
::v-deep .el-menu--inline .el-menu-item {
    padding-left: 45px;
}
::v-deep .el-menu--inline .el-submenu__title {
    padding-left: 45px;
}
::v-deep .el-menu--inline .el-menu--inline .el-menu-item {
    padding-left: 67.5px;
}
</style>
